<template>
  <div id="app">
    <div class="MainCenter">
      <div class="MainBG">
        <header>
          <!-- <h1>端午消消粽</h1> -->
          <img src="./assets/title.png" alt="" />
          <button class="tipBtn" @click="isTip = !isTip">
            <img src="./assets/svg/tip.svg" alt="" />
          </button>
          <div class="tipBox" v-show="isTip">
            <div class="tipText">
              <h2>游戏说明</h2>
              <p>
                由图可见 龙舟上有ℹ️粒粽子, <br />
                你的任务就是利用打字的形式在<br />
                <span>最短的时间把他们吃掉以增加龙舟行驶速度 ⛵</span> <br />
                并保证龙舟行驶速度最少为80/n, 即可过关
              </p>
              <h2>游戏玩法</h2>
              <p>每次打字成功会消除一粒粽子，打字失败会增加一粒粽子</p>
              <p>
                结束后会显示剩余的粽子与龙舟的行驶速度 <br />
                (速度 = 粽子总数 / 时间 )
              </p>
              <button @click="isTip = false">OK</button>
            </div>
          </div>
        </header>
        <div class="NumBox" v-if="isOpen">
          <li class="lNum">
            时间
            <p>{{ times }}</p>
          </li>
          <li class="cNum">
            粽子数
            <p>{{ items }}</p>
          </li>
          <li class="rNum">
            龙舟速度
            <p>{{ speed }} /m</p>
          </li>
        </div>
        <div class="cOpen" @click="openGame" v-else>开始游戏</div>
        <main>
          <div class="mainBox">
            <div class="GameMain">
              <div class="zongBox">
                <img
                  class="zzbox"
                  src="./assets/zongzi.png"
                  alt=""
                  v-for="item in items"
                  :key="item"
                />
              </div>
            </div>
            <div class="iptBox">
              <h5>{{ list[0].en }}</h5>
              <h6>{{ list[0].zh }}</h6>
              <input
                class="ipt"
                type="text"
                placeholder="Just do it"
                v-model="nowValue"
                @keyup.enter="check"
              />
            </div>
          </div>
        </main>
      </div>
    </div>
    <div class="cover" v-if="overTip">
      <div class="coverBox">
        <h2>游戏结束</h2>
        <p>
          龙舟的速度为: <span>{{ speed }}</span> <br />
          搬运的粽子数: <span>{{ items }}</span> <br />
        </p>
        <button @click="overTip = false">再来一次</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTip: false, // 是否显示游戏说明
      overTip: true, // 是否显示游戏结束说明
      isOpen: false, // 是否开始游戏
      list: [{ en: "apple", zh: "苹果" }, {}, {}],
      nowValue: "", //当前输入的值
      times: 60, // 时间
      items: 1, // 粽子总数
      speed: 100, // 龙舟速度
    };
  },
  methods: {
    info() {
      // 开始游戏
      this.isOpen = true;
      // 开始计时器
      let timer = setInterval(() => {
        this.times--;
        console.log(this.times);
        if (this.times % 5 == 0) {
          if (this.items % 3 == 0) {
            this.speed += 10;
          } else {
            this.speed -= 10;
          }
        }
        if (this.times <= 0) {
          clearInterval(timer);
          this.overTip = true;
        }
      }, 1000);
      if (this.speed < 80) this.speed = "太慢了";
    },
    get(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          callback(xhr.responseText);
        }
      };
      xhr.send();
    },
    openGame() {
      this.info();
    },
  },
  watch: {
    nowValue(val) {
      let len = this.nowValue.length;
      if (len > 15) {
        alert("超过15个字符");
        // this.nowValue = this.nowValue.slice(0,15);
        return;
      }
      console.log(this.list[0].en.length);
      if (len == this.list[0].en.length) {
        if (this.nowValue == this.list[0].en) {
          this.items++;
          // this.list.shift();
          this.nowValue = "";
        } else {
          // this.items--;
          // this.list.unshift({
          //   en: this.nowValue,
          //   zh: this.list[0].zh,
          // });
          this.nowValue = "";
        }
      }
    },
  },
  computed: {
    // speed() {
    //   return (this.items / 60).toFixed(2);
    // },
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
}
ul,
li {
  list-style: none;
}
#app {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-family: "Open Sans", sans-serif;
  padding: 50px 200px;
  background-color: #e5e5f7;
  opacity: 0.8;
  background-image: radial-gradient(
    #444cf7 1.7000000000000002px,
    #e5e5f7 1.7000000000000002px
  );
  background-size: 34px 34px;
}
.MainCenter {
  width: 80%;
  margin: 0 auto;
  background-color: #d7daff;
  border: 5px solid #000;
  border-radius: 50px;
  .MainBG {
    background: url("./assets/svg.png") no-repeat center center / cover;
    padding-bottom: 100px;
  }
}
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 20%;
  margin-bottom: 30px;
  h1 {
    font-size: 70px;
    color: #fff;
    margin-bottom: 20px;
    font-family: "楷体";
  }
  .tipBtn {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: rgb(243, 218, 185);
    border: 2px solid #fff;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    img {
      width: 100%;
    }
  }
}
.tipBox {
  margin-top: 50px;
  z-index: 999;
  position: fixed;
  width: 500px;
  height: 600px;
  border-radius: 30px;
  border: 5px solid rgb(255, 255, 255);
  // 背景颜色 背景图片 背景重复  背景位置 背景大小
  background: rgb(245, 241, 206) url("./assets/tipDragon.jpg") no-repeat 0px
    300px/ 500px 300px;
  overflow-y: hidden;
  // 谈出淡入动画
  animation: showTipBox 1s ease-in-out;
  .tipText {
    padding: 20px;
    text-align: center;
    height: 300px;
    line-height: 1.5;
    h2 {
      font-size: 30px;
      margin: 10px 0;
    }
    span {
      font-weight: 900;
      color: rgb(45, 45, 255);
    }
  }
  button {
    width: 100px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: rgb(255, 255, 255);
    color: rgb(45, 45, 255);
    font-size: 16px;
    margin: 20px auto;
    cursor: pointer;
  }
}
@keyframes showTipBox {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
// 游戏结束界面
.cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #3acd3f;
  background-image: linear-gradient(
      30deg,
      #007e08 12%,
      transparent 12.5%,
      transparent 87%,
      #007e08 87.5%,
      #007e08
    ),
    linear-gradient(
      150deg,
      #007e08 12%,
      transparent 12.5%,
      transparent 87%,
      #007e08 87.5%,
      #007e08
    ),
    linear-gradient(
      30deg,
      #007e08 12%,
      transparent 12.5%,
      transparent 87%,
      #007e08 87.5%,
      #007e08
    ),
    linear-gradient(
      150deg,
      #007e08 12%,
      transparent 12.5%,
      transparent 87%,
      #007e08 87.5%,
      #007e08
    ),
    linear-gradient(
      60deg,
      #007e0877 25%,
      transparent 25.5%,
      transparent 75%,
      #007e0877 75%,
      #007e0877
    ),
    linear-gradient(
      60deg,
      #007e0877 25%,
      transparent 25.5%,
      transparent 75%,
      #007e0877 75%,
      #007e0877
    );
  background-size: 54px 95px;
  background-position: 0 0, 0 0, 27px 47px, 27px 47px, 0 0, 27px 47px;
  .coverBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    h2 {
      font-size: 100px;
      margin-bottom: 20px;
    }
    p {
      font-size: 40px;
      margin-bottom: 100px;
    }
    button {
      margin-top: 20px;
      width: 200px;
      height: 50px;
      border-radius: 20px;
      border: 1px solid #fff;
      font-size: 20px;
      font-weight: 900;
      cursor: pointer;
    }
  }
}
main {
  // width: 100%;
  padding: 0 20%;
  // margin-bottom: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .iptBox {
    h5 {
      font-size: 60px;
    }
    h6 {
      font-size: 30px;
      color: rgb(71, 68, 68);
    }
  }

  .mainBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    .GameMain {
      width: 800px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background: url("./assets/dragon.webp") no-repeat center;
      background-size: contain;
      animation: bounce-down 2s linear infinite;
      .zongBox {
        width: 300px;
        padding-right: 130px;
        .zzbox {
          width: 70px;
          height: 50px;
        }
      }
      @keyframes bounce-down {
        25% {
          transform: translateY(-20px);
        }
        50%,
        100% {
          transform: translateY(0);
        }
        75% {
          transform: translateY(20px);
        }
      }
    }
    .ipt {
      width: 300px;
      height: 50px;
      border-radius: 5px;
      border: 0;
      border-bottom: 3px solid blue;
      font-size: 30px;
      text-align: center;
      outline: none;
      padding: 0 10px;
      margin-top: 20px;
      // background: rgb(255, 255, 255);
      background: transparent;
      color: rgb(45, 45, 255);
    }
  }
}
.NumBox {
  width: 80%;
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
  li {
    width: 33%;
    font-size: 50px;
    font-weight: 700;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    color: rgb(30, 131, 58);
    // color: #fff;
    p {
      font-weight: 300;
      font-size: 55px;
      // color: #fff;
    }
  }
}
.cOpen {
  margin: 50px auto;
  width: 200px;
  height: 50px;
  border-radius: 20px;
  border: 2px solid white;
  color: white;
  font-size: 30px;
  text-align: center;
  outline: none;
  cursor: pointer;
}
</style>
